<template>
	<view class="home-container">
		<!-- 顶部欢迎区域 -->
		<view class="welcome-section">
			<view class="app-header">
				<text class="app-title">智力魔方</text>
				<text class="app-subtitle">发现你的认知潜能</text>
			</view>
			<view class="user-greeting">
				<text class="greeting-text">{{ greetingText }}，{{ userInfo.nickname }}</text>
				<text class="daily-quote">{{ dailyQuote }}</text>
			</view>
		</view>

		<!-- 每日签到 -->
		<view class="checkin-section">
			<view class="checkin-card">
				<view class="checkin-header">
					<view class="checkin-info">
						<text class="checkin-title">每日签到</text>
						<text class="checkin-streak">连续签到 {{ checkinStreak }} 天</text>
					</view>
					<view class="checkin-btn" :class="{checked: isCheckedToday}" @tap="dailyCheckin">
						<text v-if="!isCheckedToday">签到</text>
						<text v-else>✓</text>
					</view>
				</view>
				
				<!-- 签到日历 -->
				<view class="checkin-calendar">
					<view class="calendar-day" 
						v-for="(day, index) in checkinCalendar" 
						:key="index"
						:class="{checked: day.checked, today: day.isToday}">
						<text class="day-number">{{ day.day }}</text>
						<view v-if="day.checked" class="check-mark">✓</view>
					</view>
				</view>
				
				<!-- 签到奖励预览 -->
				<view class="checkin-rewards">
					<text class="rewards-title">签到奖励</text>
					<view class="reward-items">
						<view class="reward-item" 
							v-for="(reward, index) in checkinRewards" 
							:key="index"
							:class="{active: checkinStreak >= reward.days, claimed: reward.claimed}">
							<text class="reward-day">第{{ reward.days }}天</text>
							<text class="reward-desc">{{ reward.description }}</text>
							<view v-if="reward.claimed" class="claimed-mark">已领取</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 快速测试入口 -->
		<view class="quick-test-section">
			<view class="recommended-test">
				<view class="recommend-header">
					<text class="recommend-title">今日推荐</text>
					<text class="recommend-subtitle">{{ todayRecommend.name }}</text>
				</view>
				<view class="recommend-content">
					<view class="recommend-icon">
						<text class="icon-text">{{ todayRecommend.icon }}</text>
					</view>
					<view class="recommend-info">
						<text class="recommend-desc">{{ todayRecommend.description }}</text>
						<text class="recommend-tip">预计用时: {{ todayRecommend.duration }}</text>
					</view>
					<view class="quick-start-btn" @tap="startTest(todayRecommend.path)">
						<text>开始测试</text>
					</view>
				</view>
			</view>
			<view class="test-progress">
				<text class="progress-text">今天已完成 {{ completedToday }}/{{ totalTests }} 项测试</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="{width: progressPercent + '%'}"></view>
				</view>
			</view>
		</view>

		<!-- 个人数据概览 -->
		<view class="stats-overview">
			<view class="stats-card iq-card">
				<view class="stat-header">
					<text class="stat-title">综合智商</text>
					<text class="stat-value">{{ overallIQ }}</text>
				</view>
				<text class="stat-level">{{ iqLevel }}</text>
			</view>
			<view class="stats-card test-count-card">
				<view class="stat-header">
					<text class="stat-title">本周测试</text>
					<text class="stat-value">{{ weeklyTests }}</text>
				</view>
				<text class="stat-level">次</text>
			</view>
			<view class="stats-card rank-card">
				<view class="stat-header">
					<text class="stat-title">超越用户</text>
					<text class="stat-value">{{ userRank }}%</text>
				</view>
				<text class="stat-level">排名</text>
			</view>
		</view>

		<!-- 测试项目网格 -->
		<view class="test-grid-section">
			<view class="section-header">
				<text class="section-title">智力测试项目</text>
				<text class="section-subtitle">选择你感兴趣的测试开始挑战</text>
			</view>
			<view class="test-grid">
				<view class="test-item" v-for="(test, index) in testItems" :key="index" @tap="startTest(test.path)">
					<view class="test-icon">
						<text class="icon-text">{{ test.icon }}</text>
					</view>
					<view class="test-info">
						<text class="test-name">{{ test.name }}</text>
						<text class="test-desc">{{ test.description }}</text>
						<view class="test-stats">
							<text class="best-score" v-if="test.bestScore">最佳: {{ test.bestScore }}</text>
							<text class="test-count">{{ test.completedCount }}次</text>
						</view>
					</view>
					<view class="difficulty-badge" :class="'level-' + test.difficulty">
						<text>{{ getDifficultyText(test.difficulty) }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 最近活动 -->
		<view class="recent-activity">
			<view class="section-header">
				<text class="section-title">最近活动</text>
				<text class="view-more" @tap="viewAllRecords">查看更多</text>
			</view>
			<view class="activity-list">
				<view class="activity-item" v-for="(activity, index) in recentActivities" :key="index">
					<view class="activity-icon">
						<text class="icon-text">{{ activity.icon }}</text>
					</view>
					<view class="activity-content">
						<text class="activity-title">{{ activity.title }}</text>
						<text class="activity-time">{{ activity.time }}</text>
					</view>
					<view class="activity-result" v-if="activity.result">
						<text class="result-text">{{ activity.result }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 智力小贴士 -->
		<view class="tips-section">
			<view class="section-header">
				<text class="section-title">每日一题</text>
				<text class="refresh-btn" @tap="refreshDailyTip">🔄</text>
			</view>
			<view class="daily-tip-card">
				<text class="tip-question">{{ dailyTip.question }}</text>
				<view class="tip-options" v-if="!dailyTip.showAnswer">
					<view class="tip-option" v-for="(option, index) in dailyTip.options" :key="index" @tap="selectTipOption(index)">
						<text>{{ option }}</text>
					</view>
				</view>
				<view class="tip-answer" v-if="dailyTip.showAnswer">
					<text class="answer-text">答案: {{ dailyTip.answer }}</text>
					<text class="answer-explanation">{{ dailyTip.explanation }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 签到相关状态
const isCheckedToday = ref(false)
const checkinStreak = ref(7)
const lastCheckinDate = ref('')

// 签到日历（显示最近7天）
const checkinCalendar = ref([])

// 签到奖励配置
const checkinRewards = ref([
	{ days: 1, description: '智商+1', claimed: true },
	{ days: 3, description: '解锁新徽章', claimed: true },
	{ days: 7, description: '专属头像框', claimed: false },
	{ days: 15, description: '高级分析报告', claimed: false },
	{ days: 30, description: '传奇成就徽章', claimed: false }
])

// 用户信息
const userInfo = ref({
	nickname: '智力挑战者',
	avatar: '/static/logo.png'
})

// 问候语
const greetingText = computed(() => {
	const hour = new Date().getHours()
	if (hour < 6) return '深夜好'
	if (hour < 12) return '早上好'
	if (hour < 18) return '下午好'
	return '晚上好'
})

// 每日励志语
const dailyQuote = ref('智慧不是知识的积累，而是思维的觉醒')

// 今日推荐测试
const todayRecommend = ref({
	name: '反应时间测试',
	icon: '⚡',
	description: '测试你的反应速度和注意力',
	duration: '3分钟',
	path: '/pages/reaction/reaction'
})

// 测试进度
const completedToday = ref(2)
const totalTests = ref(7)
const progressPercent = computed(() => {
	return (completedToday.value / totalTests.value) * 100
})

// 个人数据
const overallIQ = ref(120)
const weeklyTests = ref(15)
const userRank = ref(85)

// 智商等级
const iqLevel = computed(() => {
	const iq = overallIQ.value
	if (iq >= 140) return '天才级别'
	if (iq >= 130) return '极优秀'
	if (iq >= 120) return '优秀'
	if (iq >= 110) return '中上'
	if (iq >= 90) return '中等'
	return '待提升'
})

// 测试项目列表
const testItems = ref([
	{
		name: '反应时间',
		icon: '⚡',
		description: '测试反应速度',
		path: '/pages/reaction/reaction',
		difficulty: 1,
		bestScore: '245ms',
		completedCount: 15
	},
	{
		name: '记忆力测试',
		icon: '🧠',
		description: '挑战记忆极限',
		path: '/pages/memory/memory',
		difficulty: 2,
		bestScore: '8级',
		completedCount: 12
	},
	{
		name: '数字记忆',
		icon: '🔢',
		description: '数字序列记忆',
		path: '/pages/number/number',
		difficulty: 2,
		bestScore: '12位',
		completedCount: 20
	},
	{
		name: '语音记忆',
		icon: '🎵',
		description: '听觉记忆训练',
		path: '/pages/voice/voice',
		difficulty: 3,
		bestScore: '7个词',
		completedCount: 8
	},
	{
		name: '黑猩猩测试',
		icon: '🐵',
		description: '经典认知测试',
		path: '/pages/chimp/chimp',
		difficulty: 3,
		bestScore: '6级',
		completedCount: 10
	},
	{
		name: '视觉记忆',
		icon: '👁️',
		description: '图形记忆挑战',
		path: '/pages/visual/visual',
		difficulty: 2,
		bestScore: '9个图形',
		completedCount: 14
	},
	{
		name: '打字测试',
		icon: '⌨️',
		description: '速度与准确性',
		path: '/pages/typing/typing',
		difficulty: 1,
		bestScore: '85WPM',
		completedCount: 25
	}
])

// 最近活动
const recentActivities = ref([
	{
		title: '完成反应时间测试',
		icon: '⚡',
		time: '2小时前',
		result: '245ms'
	},
	{
		title: '解锁新成就：反应达人',
		icon: '🏆',
		time: '3小时前',
		result: null
	},
	{
		title: '完成数字记忆测试',
		icon: '🔢',
		time: '昨天',
		result: '12位'
	}
])

// 每日一题
const dailyTip = ref({
	question: '如果今天是星期三，那么100天后是星期几？',
	options: ['星期一', '星期二', '星期三', '星期四'],
	answer: '星期五',
	explanation: '100÷7=14余2，所以是星期三往后推2天，即星期五',
	showAnswer: false
})

// 初始化签到日历
const initCheckinCalendar = () => {
	const calendar = []
	const today = new Date()
	
	for (let i = 6; i >= 0; i--) {
		const date = new Date(today)
		date.setDate(today.getDate() - i)
		
		calendar.push({
			day: date.getDate(),
			date: date.toDateString(),
			isToday: i === 0,
			checked: i < checkinStreak.value // 根据连续签到天数设置已签到状态
		})
	}
	
	checkinCalendar.value = calendar
}

// 每日签到
const dailyCheckin = () => {
	if (isCheckedToday.value) {
		uni.showToast({
			title: '今天已经签到过了',
			icon: 'none'
		})
		return
	}
	
	// 执行签到
	isCheckedToday.value = true
	checkinStreak.value += 1
	lastCheckinDate.value = new Date().toDateString()
	
	// 更新日历
	const todayIndex = checkinCalendar.value.findIndex(day => day.isToday)
	if (todayIndex !== -1) {
		checkinCalendar.value[todayIndex].checked = true
	}
	
	// 检查是否有奖励可领取
	const availableReward = checkinRewards.value.find(reward => 
		reward.days === checkinStreak.value && !reward.claimed
	)
	
	if (availableReward) {
		availableReward.claimed = true
		uni.showModal({
			title: '签到奖励',
			content: `恭喜获得：${availableReward.description}！`,
			showCancel: false,
			confirmText: '太棒了'
		})
	} else {
		uni.showToast({
			title: `签到成功！连续${checkinStreak.value}天`,
			icon: 'success'
		})
	}
	
	// 保存签到数据
	saveCheckinData()
}

// 保存签到数据
const saveCheckinData = () => {
	try {
		uni.setStorageSync('checkinData', {
			isCheckedToday: isCheckedToday.value,
			checkinStreak: checkinStreak.value,
			lastCheckinDate: lastCheckinDate.value,
			rewards: checkinRewards.value
		})
	} catch (e) {
		console.error('保存签到数据失败:', e)
	}
}

// 加载签到数据
const loadCheckinData = () => {
	try {
		const savedData = uni.getStorageSync('checkinData')
		if (savedData) {
			const today = new Date().toDateString()
			
			// 检查是否是新的一天
			if (savedData.lastCheckinDate !== today) {
				// 检查是否连续签到
				const lastDate = new Date(savedData.lastCheckinDate)
				const todayDate = new Date(today)
				const dayDiff = Math.floor((todayDate - lastDate) / (1000 * 60 * 60 * 24))
				
				if (dayDiff === 1) {
					// 连续签到，保持连击
					checkinStreak.value = savedData.checkinStreak
				} else if (dayDiff > 1) {
					// 断签，重置连击
					checkinStreak.value = 0
				}
				
				isCheckedToday.value = false
			} else {
				// 同一天，恢复签到状态
				isCheckedToday.value = savedData.isCheckedToday
				checkinStreak.value = savedData.checkinStreak
			}
			
			lastCheckinDate.value = savedData.lastCheckinDate
			if (savedData.rewards) {
				checkinRewards.value = savedData.rewards
			}
		}
	} catch (e) {
		console.error('加载签到数据失败:', e)
	}
}

// 页面加载
onMounted(() => {
	loadCheckinData()
	initCheckinCalendar()
	loadUserData()
	loadDailyData()
})

// 加载用户数据
const loadUserData = () => {
	try {
		const savedUserInfo = uni.getStorageSync('userInfo')
		if (savedUserInfo) {
			userInfo.value = { ...userInfo.value, ...savedUserInfo }
		}
		
		const savedIQ = uni.getStorageSync('overallIQ')
		if (savedIQ) {
			overallIQ.value = savedIQ
		}
		
		const savedStats = uni.getStorageSync('testStats')
		if (savedStats) {
			// 更新测试项目的统计数据
			testItems.value.forEach(item => {
				const stat = savedStats.find(s => s.name.includes(item.name))
				if (stat) {
					item.completedCount = stat.count
					item.bestScore = stat.best
				}
			})
		}
	} catch (e) {
		console.error('加载用户数据失败:', e)
	}
}

// 加载每日数据
const loadDailyData = () => {
	// 随机选择今日推荐测试
	const randomIndex = Math.floor(Math.random() * testItems.value.length)
	todayRecommend.value = {
		...testItems.value[randomIndex],
		duration: '3-5分钟'
	}
	
	// 随机励志语
	const quotes = [
		'智慧不是知识的积累，而是思维的觉醒',
		'大脑就像肌肉，越锻炼越强壮',
		'每一次挑战都是成长的机会',
		'认知能力的提升需要持续的练习',
		'智力的边界只存在于你的想象中'
	]
	dailyQuote.value = quotes[Math.floor(Math.random() * quotes.length)]
}

// 获取难度文本
const getDifficultyText = (level) => {
	const levels = ['', '简单', '中等', '困难']
	return levels[level] || '未知'
}

// 开始测试
const startTest = (path) => {
	uni.navigateTo({
		url: path
	})
}

// 查看所有记录
const viewAllRecords = () => {
	uni.navigateTo({
		url: '/pages/result/result'
	})
}

// 选择每日一题选项
const selectTipOption = (index) => {
	dailyTip.value.showAnswer = true
	uni.showToast({
		title: index === 2 ? '回答正确！' : '再想想看',
		icon: index === 2 ? 'success' : 'none'
	})
}

// 刷新每日一题
const refreshDailyTip = () => {
	const tips = [
		{
			question: '如果今天是星期三，那么100天后是星期几？',
			options: ['星期一', '星期二', '星期三', '星期四'],
			answer: '星期五',
			explanation: '100÷7=14余2，所以是星期三往后推2天，即星期五'
		},
		{
			question: '一个数列：2, 4, 8, 16, ?，下一个数字是？',
			options: ['24', '32', '30', '28'],
			answer: '32',
			explanation: '这是一个等比数列，每项都是前一项的2倍'
		},
		{
			question: '如果所有的猫都是动物，所有的动物都需要食物，那么？',
			options: ['猫不需要食物', '所有猫都需要食物', '有些猫需要食物', '无法确定'],
			answer: '所有猫都需要食物',
			explanation: '根据逻辑推理，猫→动物→需要食物，所以所有猫都需要食物'
		}
	]
	
	const randomTip = tips[Math.floor(Math.random() * tips.length)]
	dailyTip.value = { ...randomTip, showAnswer: false }
	uni.showToast({ title: '题目已刷新', icon: 'success' })
}
</script>

<style lang="scss" scoped>
.home-container {
	padding: 20rpx;
	background: linear-gradient(180deg, #f8f9ff 0%, #f5f5f5 100%);
	min-height: 100vh;
}

// 欢迎区域
.welcome-section {
	margin-bottom: 30rpx;

	.app-header {
		text-align: center;
		margin-bottom: 20rpx;

		.app-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #007AFF;
			display: block;
			margin-bottom: 10rpx;
		}

		.app-subtitle {
			font-size: 28rpx;
			color: #666;
			display: block;
		}
	}

	.user-greeting {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.greeting-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 15rpx;
		}

		.daily-quote {
			font-size: 26rpx;
			color: #666;
			line-height: 1.5;
			display: block;
			font-style: italic;
		}
	}
}

// 签到区域
.checkin-section {
	margin-bottom: 30rpx;

	.checkin-card {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.checkin-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;

			.checkin-info {
				.checkin-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 5rpx;
				}

				.checkin-streak {
					font-size: 24rpx;
					color: #007AFF;
					display: block;
				}
			}

			.checkin-btn {
				width: 120rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: linear-gradient(135deg, #007AFF, #00D4FF);
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: bold;
				transition: all 0.3s ease;
				box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);

				&:active {
					transform: scale(0.95);
				}

				&.checked {
					background: #28a745;
					box-shadow: 0 4rpx 15rpx rgba(40, 167, 69, 0.3);
				}
			}
		}

		.checkin-calendar {
			display: flex;
			justify-content: space-between;
			margin-bottom: 25rpx;

			.calendar-day {
				width: 80rpx;
				height: 80rpx;
				border-radius: 15rpx;
				background: #f8f9fa;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				transition: all 0.3s ease;

				&.today {
					border: 2rpx solid #007AFF;
					background: rgba(0, 122, 255, 0.1);
				}

				&.checked {
					background: linear-gradient(135deg, #28a745, #20c997);
					color: white;
				}

				.day-number {
					font-size: 24rpx;
					font-weight: bold;
				}

				.check-mark {
					position: absolute;
					top: 5rpx;
					right: 5rpx;
					font-size: 16rpx;
					color: white;
				}
			}
		}

		.checkin-rewards {
			.rewards-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 15rpx;
			}

			.reward-items {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.reward-item {
					flex: 1;
					min-width: 140rpx;
					padding: 15rpx;
					border-radius: 10rpx;
					background: #f8f9fa;
					border: 1rpx solid #e9ecef;
					text-align: center;
					position: relative;
					transition: all 0.3s ease;

					&.active {
						background: linear-gradient(135deg, #007AFF, #00D4FF);
						color: white;
						border-color: #007AFF;
						transform: translateY(-2rpx);
						box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);
					}

					&.claimed {
						background: #28a745;
						color: white;
						border-color: #28a745;
					}

					.reward-day {
						font-size: 20rpx;
						font-weight: bold;
						display: block;
						margin-bottom: 5rpx;
					}

					.reward-desc {
						font-size: 18rpx;
						display: block;
					}

					.claimed-mark {
						position: absolute;
						top: -5rpx;
						right: -5rpx;
						background: #ffc107;
						color: #333;
						font-size: 16rpx;
						padding: 2rpx 6rpx;
						border-radius: 8rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
}

// 快速测试区域
.quick-test-section {
	margin-bottom: 30rpx;

	.recommended-test {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		color: white;

		.recommend-header {
			margin-bottom: 20rpx;

			.recommend-title {
				font-size: 24rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 5rpx;
			}

			.recommend-subtitle {
				font-size: 36rpx;
				font-weight: bold;
				display: block;
			}
		}

		.recommend-content {
			display: flex;
			align-items: center;

			.recommend-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background: rgba(255, 255, 255, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon-text {
					font-size: 32rpx;
				}
			}

			.recommend-info {
				flex: 1;

				.recommend-desc {
					font-size: 28rpx;
					display: block;
					margin-bottom: 8rpx;
				}

				.recommend-tip {
					font-size: 24rpx;
					opacity: 0.8;
					display: block;
				}
			}

			.quick-start-btn {
				background: white;
				color: #667eea;
				border-radius: 30rpx;
				padding: 20rpx 30rpx;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}

	.test-progress {
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

		.progress-text {
			font-size: 26rpx;
			color: #333;
			display: block;
			margin-bottom: 15rpx;
		}

		.progress-bar {
			height: 8rpx;
			background: #f0f0f0;
			border-radius: 4rpx;
			overflow: hidden;

			.progress-fill {
				height: 100%;
				background: linear-gradient(90deg, #007AFF, #00D4FF);
				transition: width 0.3s ease;
			}
		}
	}
}

// 数据概览
.stats-overview {
	display: flex;
	gap: 15rpx;
	margin-bottom: 30rpx;

	.stats-card {
		flex: 1;
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

		.stat-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.stat-title {
				font-size: 24rpx;
				color: #666;
			}

			.stat-value {
				font-size: 32rpx;
				font-weight: bold;
				color: #007AFF;
			}
		}

		.stat-level {
			font-size: 22rpx;
			color: #999;
			display: block;
		}
	}
}

// 测试网格
.test-grid-section {
	margin-bottom: 30rpx;

	.section-header {
		margin-bottom: 25rpx;

		.section-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 8rpx;
		}

		.section-subtitle {
			font-size: 26rpx;
			color: #666;
			display: block;
		}
	}

	.test-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;

		.test-item {
			background: white;
			border-radius: 20rpx;
			padding: 25rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			position: relative;
			transition: transform 0.2s ease;

			&:active {
				transform: scale(0.95);
			}

			.test-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: #f8f9fa;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15rpx;

				.icon-text {
					font-size: 28rpx;
				}
			}

			.test-info {
				.test-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 8rpx;
				}

				.test-desc {
					font-size: 24rpx;
					color: #666;
					display: block;
					margin-bottom: 15rpx;
					line-height: 1.4;
				}

				.test-stats {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.best-score {
						font-size: 22rpx;
						color: #007AFF;
						font-weight: bold;
					}

					.test-count {
						font-size: 22rpx;
						color: #999;
					}
				}
			}

			.difficulty-badge {
				position: absolute;
				top: 15rpx;
				right: 15rpx;
				padding: 8rpx 15rpx;
				border-radius: 20rpx;
				font-size: 20rpx;

				&.level-1 {
					background: #e8f5e8;
					color: #52c41a;
				}

				&.level-2 {
					background: #fff7e6;
					color: #fa8c16;
				}

				&.level-3 {
					background: #fff2f0;
					color: #f5222d;
				}
			}
		}
	}
}

// 最近活动
.recent-activity {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.view-more {
			font-size: 26rpx;
			color: #007AFF;
		}
	}

	.activity-list {
		.activity-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.activity-icon {
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background: #f8f9fa;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon-text {
					font-size: 20rpx;
				}
			}

			.activity-content {
				flex: 1;

				.activity-title {
					font-size: 28rpx;
					color: #333;
					display: block;
					margin-bottom: 5rpx;
				}

				.activity-time {
					font-size: 24rpx;
					color: #999;
					display: block;
				}
			}

			.activity-result {
				.result-text {
					font-size: 26rpx;
					color: #007AFF;
					font-weight: bold;
				}
			}
		}
	}
}

// 智力小贴士
.tips-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.refresh-btn {
			font-size: 28rpx;
			padding: 10rpx;
		}
	}

	.daily-tip-card {
		.tip-question {
			font-size: 28rpx;
			color: #333;
			line-height: 1.5;
			display: block;
			margin-bottom: 20rpx;
		}

		.tip-options {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15rpx;
			margin-bottom: 20rpx;

			.tip-option {
				background: #f8f9fa;
				border-radius: 10rpx;
				padding: 20rpx;
				text-align: center;
				font-size: 26rpx;
				color: #333;
				transition: all 0.2s ease;

				&:active {
					background: #007AFF;
					color: white;
				}
			}
		}

		.tip-answer {
			background: #f0f9ff;
			border-radius: 10rpx;
			padding: 20rpx;

			.answer-text {
				font-size: 28rpx;
				color: #007AFF;
				font-weight: bold;
				display: block;
				margin-bottom: 10rpx;
			}

			.answer-explanation {
				font-size: 26rpx;
				color: #666;
				line-height: 1.5;
				display: block;
			}
		}
	}
}
</style>
